<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
    </style>
  </head>
  <body>
    <div id="app">
              <div style="border: 2px solid #d3dce6;height: 60px;width:600px;top: 10px;line-height: 60px" >
                <i class="el-icon-document">品牌列表</i>
                <el-button style="float: right;top: 10px;position: relative" type="success"
                           @click="brandInsert"
                >添加品牌</el-button>
              </div>
              <div style="border: 2px solid #d3dce6;top: 10px;width:600px;position: relative">

                <el-table
                        @selection-change="handleSelectionChange"
                        :data="showBrandArr"
                        style="width: 100%">
                  <el-table-column
                          type="selection"
                          width="55">
                  </el-table-column>
                  <el-table-column type="index" :index="indexMethod" label="编号"></el-table-column>
                  <el-table-column
                          prop="name"
                          label="品牌名称"
                          width="180">
                  </el-table-column>
                  <el-table-column label="操作">
                    <template slot-scope="scope">
                      <el-button size="mini" @click="brandUpdate(scope.row)"
                                 type="success">修改</el-button>
                      <el-popconfirm
                              title="您确定删除此品牌吗?"
                              @confirm="brandDelete(scope.$index, scope.row)"
                      >
                        <el-button slot="reference"  size="mini"
                                   type="danger">删除</el-button>
                      </el-popconfirm>
                    </template>
                  </el-table-column>
                </el-table>
                <!--分页-->
                <el-pagination
                        style="float: right"
                        layout="total, sizes, prev, pager, next, jumper"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="pageIndex"
                        :page-size="pageSize"
                        :page-sizes="[3,5,8,]"
                        :total="total"
                >
                </el-pagination>
                <el-button
                        style="float: left"
                        @click="deleteAllSelection()"
                        icon="el-icon-delete"
                        type="danger"
                        size="mini">批量删除</el-button>
              </div>
    </div>
  </body>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
  <!-- import Vue before Element -->
  <script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
  <!-- import JavaScript -->
  <script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
  <script>
    let v = new Vue({
      el: '#app',
      data: function() {
        return {
          showBrandArr:"",
          brandArr:[],
          pageIndex: 1,
          pageSize: 5,
          total: 0,
        }
      },
      methods:{
        brandInsert(){
          let name = prompt("请输入品牌的名称");
          if (name==null){
            return;
          }
          if (name==''){
            v.$message.error("品牌名称不能为空");
            return;
          }
          axios.get("/brand/insert?name="+name).then(function (response) {
            v.brandArr = response.data;

          })
        },
        brandUpdate(brand){
          let name = prompt("请输入新的品牌名称");
          //点击取消
          if (name==null){
            return;
          }
          if (name==''){
            v.$message.error("分类名称不能为空");
            return;
          }
          //创建新对象
          let c = {id:brand.id,name:name};
          //发出修改请求  把分类对象传递过去
          axios.post("/brand/update",c).then(function () {
            brand.name=name;
          })
        },
        brandDelete(index,brand){
          //发请求删除品牌
          axios.get("/brand/delete?id="+brand.id).then(function () {
            //删除数组中的元素  (删除位置,删除数量)
            v.brandArr.splice(index,1);
          })
        },

        /****************商品批量操作********************/
        //勾选表格多选框
        handleSelectionChange(val) {
          this.multipleSelection = val  //当前选中行的数据
        },
        deleteAllSelection() {
          if (this.multipleSelection.length > 0) {
            this.$confirm('此操作将删除选中项,是否继续', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              const idList = []
              for (const v of this.multipleSelection) {
                idList.push(v.id)
              }
              this.deleteSelectAllBrands(idList)
            }).catch(() => {

            })
          } else {
            this.$notify({
              title: '提示',
              message: '请勾选要提交的项！',
              type: 'warning',
              duration: 2000
            })
          }
        },
        //批量删除品牌
        deleteSelectAllBrands(idList) {
          axios.post("/brand/deleteSelectAllBrands",idList).then(function (response) {
            v.brandArr = response.data;
            v.total = v.brandArr.length;
            v.showBrandArr = v.brandArr.slice((v.pageIndex - 1) * v.pageSize, v.pageIndex * v.pageSize);
          })
        },

        /****************品牌增删查、分页***********************/
        getShowBrandArr() {
          //获取截取开始索引
          let begin = (v.pageIndex - 1) * v.pageSize;
          //获取截取结束索引
          let end = v.pageIndex * v.pageSize;
          //通过索引去截取，从而展示
          v.showBrandArr = v.brandArr.slice(begin, end);
        },
        //页数改变，重新截取
        handleCurrentChange(val) {
          v.pageIndex = val;
          this.getShowBrandArr();
        },
        //条目数改变，也重新截取
        handleSizeChange(val) {
          v.pageIndex = 1;
          v.pageSize = val;
          this.getShowBrandArr();
        },
        indexMethod(index){
          return index+(v.pageIndex-1)*v.pageSize+1;
        },
      },
      created:function () {

        //发请求获取品牌信息
        axios.get("/brand/select").then(function (response) {
          v.brandArr = response.data;
          v.total = v.brandArr.length;
          v.showBrandArr = v.brandArr.slice((v.pageIndex - 1) * v.pageSize, v.pageIndex * v.pageSize);

        });
      }
    })
  </script>
</html>